<template>
  <div class="header">
    <section class="header-box">
      <div class="left">
        <Logo />
      </div>
      <div class="right">
        <span style="margin-right: 20px">简体中文</span>

        <el-dropdown v-if="username">
          <span style="color: #ffffff">
            {{ username }}
            <el-icon>
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">个人中心</el-dropdown-item>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </section>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'
import Logo from '@/Layout/components/menu/Logo.vue'
import { ElMessageBox } from 'element-plus'
import router from '@/router'

const store = useStore()

const username = computed(() => store.state.user.username)

const logout = async () => {
  ElMessageBox.confirm('确定退出登陆吗?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    store.dispatch('user/logout')
    router.replace('/login')
  })
}
</script>

<style scoped lang="scss">
.header {
  width: 100%;
  height: 100%;
  background: $color-bg-100;
  color: $color-accent-100;

  .header-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 16px;

    .right {
      display: flex;
      align-items: baseline;
    }
  }
}
</style>
